<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*" %>
 <%@ taglib uri="../../WEB-INF/translate.tld" prefix="ego" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" type="text/css" href="pub/dojo/dojo/resources/dojo.css" />
	<link rel="stylesheet" type="text/css" href="pub/dojo/dijit/themes/tundra/tundra.css" />
	<script type="text/javascript" src="pub/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script> 
	<script type="text/javascript" src="pub/js/debug.js"></script>

	<script type="text/javascript" src="modules/admin/script.js"></script>
	
	<style type="text/css">
	    @import "pub/dojo/dojox/grid/resources/Grid.css";
	    @import "pub/dojo/dojox/grid/resources/tundraGrid.css";
	    
	    .icon_add_employee {
			background-image: url(modules/admin/img/user.png);
			width: 32px;
			height: 32px;
	    }
	    .icon_add_department {
			background-image: url(modules/admin/img/group.png);
			width: 32px;
			height: 32px;
	    }
	    .menu_bar .dijitArrowButtonInner {
	    	display: none;
	    }
		.btn {
			cursor: pointer;
	    }
	    body {
	    	background-color: #edeeef;
	    }
	    .btn_workingDays {
	    	border:1px solid #6c7491;
	    	font-size: 10px;
	    	background-color: #f7f9ff;
	    	font-family: verdana, sans-serif;
	    }
	    #dialog_relations_tbody tr:hover {
	    	background-color: #efefef;
	    }
	    #dialog_relations_tbody td {
	    	border-bottom: 1px dotted #cecece;
	    	padding: 2px;
	    	text-align: center;
	    }
	    
	    #info_filter {
	    	text-align: center;
	    	font-weight: bold;
	    	padding: 4px;
	    	margin-bottom: 2px;
	    	display: none;
	    	background-color: #aaaaff;
	    }
	    #info_filter_dep {
	    	text-decoration: underline;
	    	color: #0000cc;
	    }
	    #info_filter_rm {
	    	margin-left: 10px;
	    	cursor: pointer;
	    	color: blue;
	    }
	</style>
	<script type="text/javascript">
	var current_employee_account = "<%= request.getAttribute("current_employee_account") %>";

	// translation
	var text_wrong_input = "<ego:t>Wrong input values</ego:t>";
	var text_least_one_relation = "<ego:t>There must be at least one relation for this employee.</ego:t>";
	var text_new_employee = "<ego:t>New Employee</ego:t>";
	var text_new_department = "<ego:t>New Department</ego:t>";
	
	</script>
	<title><ego:t>Administration</ego:t></title>
</head>
<body class="tundra">
	<center id="img"><img src="pub/img/login-loading.gif" /></center>
	
	<div id="form" style="visibility:hidden">
	<%--
	-------------- Toolbar -------------
	 --%>
		<div dojoType="dijit.Toolbar" region="top" style="text-align:center;" class="menu_bar">
			<button 
				id="btn_new_department" dojoType="dijit.form.DropDownButton"
				iconClass="icon_add_department">
				<span><ego:t>New Department</ego:t></span>
				<div dojoType="dijit.TooltipDialog" title="<ego:t>Enter information</ego:t>">
					<script type="dojo/method" event="execute">
						var label = arguments[0].name;
						if (label != '')
						{
							tab_dep_emp.selectChild(cp_department);
							var new_id = 'n'+(counter++);
							store_department_employee.newItem({
								id:'dep_'+new_id,
								departmentID:new_id,
								label:label,
								workingDays:'31'
							});
							dijit.byId('td_dep_name').attr('value', '');
							store_department_employee.save({
								onComplete: function() {
									refresh_all();
								}
							});
						}
					</script>
					<table cellspacing="2">
						<tr>
							<td><ego:t>Name</ego:t></td>
							<td><input dojoType="dijit.form.TextBox" type="text" name="name" id="td_dep_name" /></td>
						</tr>
						<tr>
							<td colspan="2" align="center">
								<button dojoType="dijit.form.Button" type="submit" onclick="return check_new_department()"><ego:t>Add</ego:t></button>
							</td>
						</tr>
					</table>
				</div>
			</button>
			<button 
				id="btn_new_employee" dojoType="dijit.form.DropDownButton"
				iconClass="icon_add_employee"> 
				<span><ego:t>New Employee</ego:t></span>
				<div dojoType="dijit.TooltipDialog" title="<ego:t>Enter information</ego:t>">
					<script type="dojo/method" event="execute">
						var label = arguments[0].account;
						var gname = arguments[0].gname;
						var lname = arguments[0].lname;
						if (check_new_employee())
						{
							tab_dep_emp.selectChild(cp_employee);
							var new_id = 'n'+(counter++);
							var new_item = store_department_employee.newItem({
								id:'emp_'+new_id,
								employeeID:''+new_id,
								label:label,
								givenName:gname,
								lastName:lname,
								isAdmin: false,
								specialLeave: '0',
								remainingLeavePrevYear: '0',
								entitlementLeave: '0',
								manageOwnLeaves: '0'
							});
							dijit.byId('td_emp_account').attr('value', '');
							dijit.byId('td_emp_gname').attr('value', '');
							dijit.byId('td_emp_lname').attr('value', '');

							// new employee - select departments
							edit_reference(new_item);
						}
					</script>
					<table cellspacing="2">
						<tr>
							<td><ego:t>Account</ego:t></td>
							<td><input dojoType="dijit.form.TextBox" type="text" name="account" id="td_emp_account" /></td>
						</tr>
						<tr>
							<td><ego:t>Given name</ego:t></td>
							<td><input dojoType="dijit.form.TextBox" type="text" name="gname" id="td_emp_gname" /></td>
						</tr>
						<tr>
							<td><ego:t>Last name</ego:t></td>
							<td><input dojoType="dijit.form.TextBox" type="text" name="lname" id="td_emp_lname" /></td>
						</tr>
						<tr>
							<td colspan="2" align="center">
								<button dojoType="dijit.form.Button" type="submit" onclick="return check_new_employee();"><ego:t>Add</ego:t></button>
							</td>
						</tr>
					</table>
				</div>
			</button>
		</div>
	<%--
	-------------- Stores -------------
	 --%>
		<div dojoType="dojo.data.ItemFileWriteStore" url="?mdl=admin&action=read&tbl=customer" jsId="store_customer"></div>
		<div dojoType="dojo.data.ItemFileWriteStore" url="?mdl=admin&action=read&tbl=department_employee" jsId="store_department_employee" clearOnClose="true"></div>
	<%-- End Stores --%>
		<div dojoType="dijit.layout.TabContainer" jsId="tab_dep_emp" style="border:1px;width:100%;height:440px">
		<%--
			-------------- Department Grid -------------
			--%>
			<div dojoType="dijit.layout.ContentPane" title="<ego:t>Departments</ego:t>" jsId="cp_department">
				<table dojoType="dojox.grid.DataGrid"
					region="top" minSize="20" splitter="true"
					jsId="grid_department" id="grid_department"
					store="store_department_employee" query="{ id:'dep_*' }"
					style="height: 400px;" singleClickEdit="true"
					> 
					<thead> 
						<tr> 
							<th field="label" width="160" editable="true" rowspan="2"><ego:t>Name</ego:t></th>
							<th field="holidayCal" width="170" editable="true" rowspan="2"><ego:t>Public holiday calendar</ego:t></th> 
							<th field="workingDays" formatter="format_workingDays" rowspan="2" editable="false" width="120"><ego:t>Working days</ego:t></th> 
							<th field="id"	rowspan="2" width="40" editable="false" formatter="format_options_dep">&nbsp;</th>
						</tr> 
						<tr>
							<th width="1">&nbsp;</th>
						</tr>
					</thead> 
				</table>
			</div>
			<%--
			-------------- Employee Grid -------------
			--%>
			<div dojoType="dijit.layout.ContentPane" title="<ego:t>Employees</ego:t>" jsId="cp_employee">
				<div id="info_filter">
					<ego:t>Filter for department</ego:t> <span id="info_filter_dep"></span>
					<span id="info_filter_rm" onclick="show_employees_from_department(-1)">X</span>
				</div>
				<table dojoType="dojox.grid.DataGrid"
					jsId="grid_employee" minSize="20" singleClickEdit="true"
					store="store_department_employee" query="{ id:'emp_*' }"
					style="height: 400px;">
					<thead>
						<tr>
							<th field="label" rowspan="2" width="145" editable="true"><ego:t>Account</ego:t></th> 
							<th field="givenName" rowspan="2" width="80" editable="true"><ego:t>Given Name</ego:t></th>
							<th field="lastName" rowspan="2" width="80" editable="true"><ego:t>Last Name</ego:t></th>
							<%--<th field="holidayCal" hidden="true" editable="true" get="function(x,y) {return get_inherited('holidayCal',x,y);}">Public holiday calendar</th>--%> 
							<th field="entitlementLeave" formatter="format_number" rowspan="2" width="60" editable="true"><ego:t>Leave entitlement</ego:t></th>
							<th field="specialLeave" formatter="format_number" rowspan="2" width="55" editable="true"><ego:t>Special leave</ego:t></th>
							<th field="remainingLeavePrevYear" formatter="format_number" rowspan="2" width="60" editable="true"><ego:t>Remaining leave (last year)</ego:t></th>
							<th field="workingDays" rowspan="2" width="110" formatter="format_workingDays" get="function(x,y) {return get_inherited('workingDays',x,y);}" editable="false"><ego:t>Working days</ego:t></th>
							<th field="id" rowspan="2" width="95" formatter="format_options_emp_relations" editable="false"><ego:t>Relations</ego:t></th>
							<th field="manageOwnLeaves" rowspan="2" width="40" cellType="dojox.grid.cells.Bool" editable="true" formatter="format_admin"><ego:t>Manage own leaves</ego:t></th>
							<th field="isAdmin" rowspan="2" width="40" cellType="dojox.grid.cells.Bool" editable="true" formatter="format_admin"><ego:t>Admin</ego:t></th>
							<th field="id"	rowspan="2" width="25" editable="false" formatter="format_options_emp_delete">&nbsp;</th>
						</tr>
						<tr>
							<th width="1">&nbsp;</th>
						</tr>
					</thead>
				</table>
			</div>
			<%--
			-------------- Customer Settings -------------
	 		--%>
			<div dojoType="dijit.layout.ContentPane" title="<ego:t>settings</ego:t>" jsId="cp_customer">
				<table dojoType="dojox.grid.DataGrid"
					jsId="grid_customer" singleClickEdit="true"
					store="store_customer" query="{ }"
					style="height: 150px;"> 
					<thead>
						<tr>
							<th field="systemAccount" rowspan="2" width="430" editable="true"><ego:t>System Account</ego:t></th> 
							<th field="password" rowspan="2" width="310" formatter="format_pwd" editable="true"><ego:t>Password</ego:t></th> 
						</tr>
						<tr>
							<th width="1">&nbsp;</th>
						</tr>
					</thead> 
				</table>
			</div>
			<%--
			-------------- WorkingDays Dialog -------------
			--%>
			<div jsId="dialog_workingDays" dojoType="dijit.Dialog" title="<ego:t>Set working days</ego:t>" style="width:220px;">
				<p>
					<input type="checkbox" id="cb_wd_1" dojoType="dijit.form.CheckBox" />
					<label for="cb_wd_1"><ego:t>Monday</ego:t></label><br/>
				</p>
				<p>
					<input type="checkbox" id="cb_wd_2" dojoType="dijit.form.CheckBox" />
					<label for="cb_wd_2"><ego:t>Tuesday</ego:t></label><br/>
				</p>
				<p>
					<input type="checkbox" id="cb_wd_4" dojoType="dijit.form.CheckBox" />
					<label for="cb_wd_4"><ego:t>Wednesday</ego:t></label><br/>
				</p>
				<p>
					<input type="checkbox" id="cb_wd_8" dojoType="dijit.form.CheckBox" />
					<label for="cb_wd_8"><ego:t>Thursday</ego:t></label><br/>
				</p>
				<p>
					<input type="checkbox" id="cb_wd_16" dojoType="dijit.form.CheckBox" />
					<label for="cb_wd_16"><ego:t>Friday</ego:t></label><br/>
				</p>
				<p>
					<input type="checkbox" id="cb_wd_32" dojoType="dijit.form.CheckBox" />
					<label for="cb_wd_32"><ego:t>Saturday</ego:t></label><br/>
				</p>
				<p>
					<input type="checkbox" id="cb_wd_64" dojoType="dijit.form.CheckBox" />
					<label for="cb_wd_64"><ego:t>Sunday</ego:t></label><br/>
				</p>
				<hr/>
				<p id="dlg_inherit">
					<input type="checkbox" id="cb_wd_inherit" dojoType="dijit.form.CheckBox" onclick="inherit_workingDays(this.checked)" />
					<label for="cb_wd_inherit"><ego:t>inherit from department</ego:t></label><br/>
				</p>
				<div style="text-align:center">
					<a href="#" onclick="apply_workingDays()"><ego:t>Apply Working Days</ego:t></a>
				</div>
			</div>
			<%--
			-------------- Relations Dialog -------------
			--%>
			<div jsId="dialog_relations" dojoType="dijit.Dialog" title="<ego:t>Set relations</ego:t>" style="width:240px;">
				<form name="form_rel">
					<table>
						<tbody id="dialog_relations_tbody">
							<tr>
								<td>&nbsp;</td>
								<td><ego:t>Member</ego:t></td>
								<td><ego:t>Supervisor</ego:t></td>
							</tr>
						</tbody>
					</table>
					<div style="text-align:center">
						<a href="#" onclick="apply_relations()"><ego:t>Apply Relations</ego:t></a>
					</div>
				</form>
			</div>
		</div>
		<%--
		---------------- Waiting Dialog -------------------
		--%>
		<div jsId="dialog_wait" dojoType="dijit.Dialog" title="<ego:t>Updating</ego:t>" style="width:130px;text-align:center">
			<img src="pub/img/login-loading.gif" /><br/>
			<ego:t>Please wait</ego:t>...
		</div>
	</div>
</body>
</html>
